import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionCreators } from './store';

import { Input, Button, Steps, Form, Select, InputNumber, Radio } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

const { Step } = Steps;
const { Option } = Select;

class FieldCalc extends Component{
  state={
    calcType: [],
  }

  componentDidMount(){
    this.props.getCalcType();
    this.props.getCalcValue();
  }

  // selectCalcType = (value,index) => {
  //   let calcType = this.state.calcType;
  //   calcType[index] = value;
  //   this.setState({calcType});
  // }

  render(){
    return (
      <Fragment>
        <Form.List name="calc">
            {(fields, { add, remove }) => {
              return (
                <div>
                  {fields.map((field, index) => (
                    <div key={field.key} style={{backgroundColor:'#f0f2f5', padding:8, margin:'8px 0'}}>
                      <Form.Item
                      label="新字段"
                      name={[field.name, "fieldName"]}
                      fieldKey={[field.fieldKey, "fieldName"]}
                      rules={[
                        {
                          required: true,
                          message: '请输入新字段！',
                        },
                      ]}
                      >
                        <Input placeholder="请输入新字段"/>
                      </Form.Item>
                      <Form.Item
                      label="计算类型"
                      name={[field.name, "calcType"]}
                      fieldKey={[field.fieldKey, "calcType"]}
                      rules={[
                        {
                          required: true,
                          message: '请选择计算类型！',
                        },]}>
                          <Select placeholder="请选择计算类型">
                            {
                              this.props.calcType.map(item=>(
                                <Option key={item.key} value={item.value}>{item.text}</Option>
                              ))
                            }
                          </Select>
                      </Form.Item>
                      <Form.Item
                      label="字段A"
                      name={[field.name, "fieldA"]}
                      fieldKey={[field.fieldKey, "fieldA"]}
                      rules={[
                        {
                          required: true,
                          message: '请选择字段！',
                        },]}>
                          <Select placeholder="请选择字段">
                            {
                              this.props.inputField.map(item=>(
                                <Option key={item.fieldName} value={item.fieldName}>{item.fieldName}</Option>
                              ))
                            }
                          </Select>
                      </Form.Item>
                      <Form.Item
                      label="字段B"
                      name={[field.name, "fieldB"]}
                      fieldKey={[field.fieldKey, "fieldB"]}
                      rules={[
                        {
                          required: true,
                          message: '请选择字段！',
                        },]}>
                          <Select placeholder="请选择字段">
                           {
                              this.props.inputField.map(item=>(
                                <Option key={item.fieldName} value={item.fieldName}>{item.fieldName}</Option>
                              ))
                            }
                          </Select>
                      </Form.Item>
                      <Form.Item
                      label="字段C"
                      name={[field.name, "fieldC"]}
                      fieldKey={[field.fieldKey, "fieldC"]}
                      rules={[
                        {
                          required: true,
                          message: '请选择字段！',
                        },]}>
                          <Select placeholder="请选择字段">
                            {
                              this.props.inputField.map(item=>(
                                <Option key={item.fieldName} value={item.fieldName}>{item.fieldName}</Option>
                              ))
                            }
                          </Select>
                      </Form.Item>
                      <Form.Item
                      label="值类型"
                      name={[field.name, "valueType"]}
                      fieldKey={[field.fieldKey, "valueType"]}
                      rules={[
                        {
                          required: true,
                          message: '请选择值类型！',
                        },]}>
                          <Select placeholder="请选择值类型">
                            {
                              this.props.calcValueType.map(item=>(
                                <Option key={item.key} value={item.value}>{item.text}</Option>
                              ))
                            }
                          </Select>
                      </Form.Item>
                      <Form.Item
                      label="长度"
                      name={[field.name, "valueLength"]}
                      fieldKey={[field.fieldKey, "valueLength"]}
                      rules={[
                        {
                          required: true,
                          message: '请填写长度！',
                        },]}>
                          <InputNumber min={0} placeholder="请填写长度" style={{width:200}}/>
                      </Form.Item>
                      <Form.Item
                      label="是否移除"
                      name={[field.name, "removedFromResult"]}
                      fieldKey={[field.fieldKey, "removedFromResult"]}
                      rules={[
                        {
                          required: true,
                          message: '请选择是否移除！',
                        },]}>
                          <Radio.Group>
                            <Radio value='true'>是</Radio>
                            <Radio value='false'>否</Radio>
                          </Radio.Group>
                      </Form.Item>
                      
                      {fields.length > 1&&field.key>0 ? (
                      <Form.Item noStyle>
                        <Button
                        onClick={() => {
                          remove(field.name);
                        }}>
                          <MinusCircleOutlined/>删除该组字段计算
                        </Button>
                      </Form.Item>
                      ) : null}
                    </div>
                  ))}
                <Form.Item noStyle>
                  <Button
                    type="dashed"
                    onClick={() => {
                      add();
                    }}
                  >
                    <PlusOutlined />新增一组字段计算
                  </Button>
                </Form.Item>
              </div>
              );
            }}
          </Form.List>
      </Fragment>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    calcType: state.getIn(['createTask','calcType']).toJS(),
    calcValueType: state.getIn(['createTask','calcValueType']).toJS(),
    inputField: state.getIn(['createTask','inputField']).toJS(),
  }
}

const mapDispatchToProps = (dispatch) => ({
  getCalcType(){
    dispatch(actionCreators.getCalcTypeOperation());
  },
  getCalcValue(){
    dispatch(actionCreators.getCalcValueOperation());
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(FieldCalc);